<template>
  <div ref="echartDom"></div>
</template>

<script setup>
import {ref, defineProps, onMounted, onUnmounted, inject, shallowRef, defineExpose, defineEmits} from 'vue'
import {pxToRem} from "@/utils/index";

const props = defineProps({
  lineData: {
    type: Object,
    default: () => {
    }
  },
  dialogData: {
    type: Object,
    default: () => ({
      fontSizeTimes: 1
    })
  }
});

const echartDom = ref(null);
const myChart = shallowRef(null);
const echarts = inject('echarts');

const tempDom = (params) => {
  let tempDom = ''
  const tempTbClass = params?.data?.percentageYoy > 0 ? 'triangle-reverse' : ''
  const tempHbClass = params?.data?.percentageMom > 0 ? 'triangle-reverse' : ''
  const tempTbColor = params?.data?.percentageYoy > 0 ? '#01FEFF' : '#E13535'
  const tempHbColor = params?.data?.percentageMom > 0 ? '#01FEFF' : '#E13535'

  switch (props?.lineData?.xAxisTimeType) {
    case 'month':
      tempDom = '<br/>' + `<div style="display: flex; align-items: center"><div class="triangle ${tempTbClass}"></div>&nbsp;<span style="color: ${tempTbColor}">${params.data?.percentageYoy}%</span>` + `&nbsp;同比</div>`
          + `<div style="display: flex; align-items: center"><div class="triangle ${tempHbClass}"></div>&nbsp;<span style="color: ${tempHbColor}">${params.data?.percentageMom}%</span>` + `&nbsp;环比</div>`
      break
    case 'year':
      tempDom = '<br/>' + `<div style="display: flex; align-items: center"><div class="triangle ${tempTbClass}"></div>&nbsp;<span style="color: ${tempTbColor}">${params.data?.percentageYoy}%</span>` + `&nbsp;同比</div>`
      break
    default:
      tempDom = ''
      break
  }
  return tempDom
}

const initEchart = () => {
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value);
    let option = {
      legend: {
        x: 'center',
        padding: [pxToRem(15), 0, pxToRem(30 * props?.dialogData?.fontSizeTimes)],
        itemWidth: pxToRem(10 * props?.dialogData?.fontSizeTimes),
        itemHeight: pxToRem(10 * props?.dialogData?.fontSizeTimes),
        textStyle: {
          color: 'white',
          fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes)
        },
        icon: "rect",
        ...props?.lineData?.legendConfig?.[props?.dialogData?.fontSizeTimes === 1 ? 'normal' : 'magnifyDialog']
      },
      grid: {
        left: 0,
        right: '5%',
        bottom: 0,
        top: `${props?.dialogData?.fontSizeTimes === 1 ? 16 : 15}%`,
        containLabel: true,
        ...props?.lineData?.gridConfig?.[props?.dialogData?.fontSizeTimes === 1 ? 'normal' : 'magnifyDialog']
      },
      dataZoom: { // 数据过多内部拖动逻辑
        type: "slider",
        startValue: 0,
        endValue: 5,
        height: pxToRem(20),
        bottom: pxToRem(10)
      },
      tooltip: {
        trigger: "axis",
      },
      xAxis: {
        min: 0,
        type: 'category',
        boundaryGap: false,
        data: props?.lineData?.xAxisData,
        axisLabel: {
          fontSize: pxToRem(9 * props?.dialogData?.fontSizeTimes),
          color: 'white',
          fontWeight: 'lighter',
          showMinLabel: false
        },
        axisLine: {
          show: false // 不显示坐标轴线
        }
      },
      yAxis: {
        min: 0,
        max: (value) => value.max || 50000,
        textStyle: {
          fontSize: pxToRem(9 * props?.dialogData?.fontSizeTimes)
        },
        axisTick: {
          show: false // 不显示坐标轴刻度线
        },
        axisLine: {
          show: false, // 不显示坐标轴线
        },
        splitLine: {
          show: false // 不显示网格线
        },
        axisLabel: {
          fontSize: pxToRem(9 * props?.dialogData?.fontSizeTimes),
          color: 'white',
          fontWeight: 'lighter'
        },
        name: props?.lineData?.yAxisName,
        nameTextStyle: {
          color: "white",
          fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
          fontWeight: 'lighter',
          padding: [0, 0, 0, pxToRem(30 * props?.dialogData?.fontSizeTimes)],
          ...props?.lineData?.yAxisConfig?.nameTextStyle?.[props?.dialogData?.fontSizeTimes === 1 ? 'normal' : 'magnifyDialog']
        },
        nameGap: pxToRem(15), // 设置名称与轴线之间的距离
      },
      series: props?.lineData?.seriesData
    }
    option && myChart.value.setOption(option, true);

    myChart.value.on("legendselectchanged", (params) => {
      event.stopPropagation();
    });
  }
}

const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  initEchart();
};


defineExpose({
  updateChart
})

onMounted(() => {
  initEchart();
  window.addEventListener("resize", updateChart);
})

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
})
</script>

<style scoped lang="less">
.h180 {
  height: 180px;
}

.dialog-h180 {
  width: 1120px;
  height: 500px;
}

.h230 {
  height: 230px;
}

.dialog-h230 {
  width: 1120px;
  height: 500px;
}

:deep(.triangle) {
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top: 5px solid #E13535;
  border-bottom: 0;
  display: inline-flex;
  align-items: center;
  margin-right: 5px;
}

:deep(.triangle-reverse) {
  transform: rotate(180deg);
  border-top: 5px solid #01FEFF;
}
</style>